<template>
	<div>

		<div class="app-container">
			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" />

			<el-button v-prmis="'goods_category_add'" type="primary" size="small" @click="add(false)">
				<template #default>
					<span class="text-sm">{{ $t('goods.types.add') }}</span>
				</template>
			</el-button>

		</div>

		<div class="app-container" v-loading="data.mtloading">

			<el-table ref="cTable" :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full" lazy :load="load"
				:tree-props="{ hasChildren: 'hasChildren' }" row-key="gc_id">

				<el-table-column prop="gc_id" label="ID" width="120" />

				<el-table-column prop="ico" :label="$t('goods.types.icon')" width="60">
					<template #default="scope">
						<img class="w-8 h-8 inline-block" :src="scope.row.ico || product" />
					</template>
				</el-table-column>

				<el-table-column prop="gc_name" :label="$t('machine.goods.class')">
					<template #default="scope">
						{{ scope.row.gc_name || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="desc" :label="$t('goods.types.desc')">
					<template #default="scope">
						{{ scope.row.desc || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="sort" :label="$t('machine.types.sort')">
					<template #default="scope">
						{{ scope.row.sort || '0' }}
					</template>
				</el-table-column>

				<el-table-column prop="status" :label="$t('public.state')">
					<template #default="scope">
						<el-tag v-if="scope.row.status == 1" type="success">{{ $t('public.enable') }}</el-tag>
						<el-tag v-else type="danger">{{ $t('public.disable') }}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="l_id" :label="$t('public.operate')">
					<template #default="scope">

						<el-button v-prmis="'goods_category_lang'" type="warning" size="small"
							@click="language(scope.row)">
							{{ $t('public.lang') }}
						</el-button>

						<el-button v-prmis="'goods_category_add'" type="success" size="small" @click="add(scope.row)">
							{{ $t('public.add') }}
						</el-button>

						<el-button v-prmis="'goods_category_update'" type="primary" size="small"
							@click="modify(scope.row)">
							{{ $t('public.edit') }}
						</el-button>

						<el-button v-prmis="'goods_category_del'" type="danger" :disabled="scope.row.hasChildren"
							size="small" @click="del(scope.row)">
							{{ $t('public.del') }}
						</el-button>

					</template>
				</el-table-column>
			</el-table>
			<PageNum :total="data.total" :page="data.goods_type" @exposeData="current" @fraction="fraction" />
		</div>

		<el-dialog v-if="data.dialogVisible" v-model="data.dialogVisible" :title="data.title" center
			:width="data.infotype == 'info' ? '30%' : '60%'"
			:class="data.infotype == 'info' ? '' : 'h-3/4 overflow-auto mt-4'"
			:style="data.infotype == 'info' ? '' : 'margin-top: 10px;height: 98%;'">
			<typeinfo v-if="data.infotype == 'info'" :info="data.addtype" @edit="edit" />
			<typelang v-if="data.infotype == 'lang'" :info="data.addtype" :language="data.languagelist" @edit="edit" />
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t, locale } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import typeinfo from '../common/type_info.vue';
import typelang from '../common/type_lang.vue';
import product from '@/assets/product.png';
import { getListcategory, addcategory, updatecategory, delcategory } from '@/api/goods';
import { ElMessage, ElMessageBox } from "element-plus";
import { getlang } from '@/api/manage';
const cTable = ref(null)
let data = reactive({
	mtloading: false, // 加载
	dialogVisible: false, // 弹窗
	infotype: '', // 弹窗类型
	title: '', // 弹窗标题
	lookup: [ // 筛选栏
		{ title: $t('goods.types.name'), type: 'input', value: '', key: 'gc_name' },
	],
	list: [], // 列表信息
	languagelist: [], // 语言列表

	treeLoad: [], // 懒加载子级菜单
	Loadstatus: false, // 懒加载状态
	Loadnum: 0, // 加载数量

	addtype: {}, // 添加/修改
	goods_type: { // 筛选数据
		gc_name: '',
		page: 1,
		pageNum: 15,
		gc_pid: 0
	},
	total: 0, // 总条数
})

// 获取列表信息
let getlist = () => {
	data.mtloading = true
	data.list = []
	getListcategory(data.goods_type).then(res =>  {
		data.mtloading = false
		if (res.state == 200) {
			for (let item of res.data.data) {
				item.hasChildren = true
				data.list.push(item)
			}
			data.total = res.data.total
		}
	}).catch(err => {
		data.mtloading = false
	})
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.goods_type[key] = e[key]
	}
	data.goods_type.page = 1
	data.goods_type.pageNum = 15
	data.treeLoad = []
	getlist()
}

// 商品多语言按钮
let language = (e) => {
	data.addtype = e
	data.infotype = 'lang'
	data.title = $t('machine.goods.setLang')
	data.dialogVisible = true
}

// 获取语言列表信息
let getlanglist = () => {
	if (data.languagelist.length != 0) {
		return
	}
	getlang({}).then(res => {
		if (res.state == 200) {
			data.languagelist = res.data
		}
	})
}

// 页数回调
let current = (e) => {
	data.goods_type.page = e
	data.treeLoad = []
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.goods_type.pageNum = e
	data.treeLoad = []
	getlist()
}

// 添加分类
let add = (e) => {
	data.infotype = 'info'
	data.title = $t('goods.types.add')
	data.addtype = {
		gc_name: '',
		desc: '',
		sort: '',
		ico: '',
		status: 1,
		gc_pid: e.gc_id || 0
	}
	data.dialogVisible = true
}

// 修改分类
let modify = (e) => {
	data.infotype = 'info'
	data.title = $t('goods.types.class')
	data.addtype = {
		gc_id: e.gc_id,
		gc_name: e.gc_name,
		desc: e.desc,
		ico: e.ico,
		sort: e.sort,
		gc_pid: e.gc_pid,
		status: e.status,
	}
	data.dialogVisible = true
}

// 数据提交
let edit = (e) => {
	if (e == false) {
		data.dialogVisible = false
		return
	}

	if (e.gc_id == undefined) {
		// 添加分类
		addcategory(e).then(res => {
			if (res.state == 200) {
				ElMessage({
					message: $t('message.addSuccess'),
					type: 'success'
				})
				data.dialogVisible = false
				if (e.gc_pid == 0) {
					getlist()
				} else {
					subordinate(e.gc_pid)
				}
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		})
	} else {
		// 修改分类
		updatecategory(e).then(res => {
			if (res.state == 200) {
				ElMessage({
					message: $t('message.modifySuccess'),
					type: 'success'
				})
				data.dialogVisible = false
				if (e.gc_pid == 0) {
					getlist()
				} else {
					subordinate(e.gc_pid)
				}
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		})
	}
}

// 删除分类
let del = (e) => {
	ElMessageBox.confirm($t('message.delData'))
		.then(res => {
			delcategory({ gc_id: e.gc_id }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					data.dialogVisible = false
					subordinate(e.gc_id)
					// getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}


// 树状懒加载
let load = (row, treeNode, resolve) => {
	let arr = []
	if (data.Loadstatus == false) {
		data.treeLoad.push({ row, treeNode, resolve })
	}
	getListcategory({ gc_pid: row.gc_id }).then(res => {
		if (res.state == 200) {
			for (let item of res.data) {
				item.hasChildren = true
				arr.push(item)
			}
		}
		if (arr.length == 0) {
			row.hasChildren = false
		}

		if (data.Loadstatus) {
			// data.Loadnum++
			// if(data.Loadnum < data.treeLoad.length){
			// 	let obj = data.treeLoad[data.Loadnum]
			// 	load(obj.row,obj.treeNode,obj.resolve)
			// }else{
			data.Loadnum = 0
			data.Loadstatus = false
			// }
		}
		resolve(arr)
	}).catch(err => {
		resolve([])
		row.hasChildren = false
		cTable.value.store.states.lazyTreeNodeMap.value[row.gc_id] = [];
	})
}

// 刷新子级节点
let subordinate = (e) => {
	let obj = {}

	console.log(e)
	console.log(data.treeLoad)

	for (let item of data.treeLoad) {
		if (item.row.gc_id == e) {
			obj = item
		}
	}

	if (obj.row != undefined) {
		for (let item of data.treeLoad) {
			if (item.row.gc_id == obj.row.gc_pid) {
				obj = item
			}
		}
		data.Loadstatus = true
		data.Loadnum = data.treeLoad.length
		obj.treeNode.loading = true
		load(obj.row, obj.treeNode, obj.resolve)
	}
}

getlist()
getlanglist()
</script>
